<template>
  <div class="backView">

    <p class="ellipsis2 nameLabel">{{courseDetail.title}}</p>
    <p class="ellipsis4 detailLabel">{{courseDetail.remark}}</p>

    <div @click="openBlank" class="_blank_detail_title" v-show="courseDetail.remarkUrl && courseRemarks.length === 0">点击查看详情</div>

    <div class="flex_start" style="margin-top: 10px; align-items: center">
      <img class="iconView" src="../../../../../../static/img/course_view.png"/>
      <p class="countLabel">{{courseDetail.viewCount}}</p>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'CourseInfo',
    props: ['courseDetail', 'courseRemarks'],
    methods:{
      openBlank(){
        window.open(this.courseDetail.remarkUrl, '_blank');
      }
    }
  }
</script>

<style scoped>
  .backView {
    padding: 8px 20px 16px 20px;
    border-bottom: #F7F7F7 solid 4px;
  }
  .nameLabel {
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }
  .detailLabel {
    margin-top: 4px;
    font-size: 12px;
    color: #999999;
  }
  .iconView {
    width: 16px;
    height: 16px;
  }
  .countLabel {
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
  }
  ._blank_detail_title{
    margin: 10px 0px;
    color: #005BAB;
    text-decoration: underline;
  }
</style>
